<template>
  <div class="content">
    <!-- 这里根据接收到的导航项信息来展示对应的内容 -->
    <component :is="currentComponent"></component>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref } from 'vue';

export default defineComponent({
  setup() {
    const currentComponent = ref(null);

    // 监听导航栏点击事件
    window.addEventListener('nav-click', (event: any) => {
      const { detail } = event;
      // 这里根据detail中的信息来决定展示哪个组件，目前只是简单示例
      currentComponent.value = detail.component;
    });

    return {
      currentComponent
    };
  }
});
</script>

<style scoped>
.content {
  padding: 10px;
}
</style>